<template>
	<view class="image-swiper">
		<!-- 图片轮播 -->
		<swiper class="swiper" indicator-dots indicator-color="#ffffff" indicator-active-color="#FF5722" autoplay
			interval="3000" duration="800" circular @change="onSwiperChange">
			<swiper-item
			v-for="(item, index) in bannerList" :key="index">
			<image :src="item.img" mode="widthFix" class="swiper-image"></image>
			</swiper-item>
		</swiper>

		<!-- 显示当前页码 -->
		<view class="page-info">
			{{ currentIndex + 1 }} / {{ bannerList.length }}
		</view>
	</view>
	<!-- 菜单列表 -->
	<view class="menu-list">
		<view class="menu-item" v-for="(item, index) in menuList" :key="index">
			<image :src="item.icon" mode="widthFix" class="menu-image"></image>
			<view class="menu-name">{{ item.title }}</view>
		</view>
	</view>

	<!-- 商品列表 -->
	<view class="product-list">
		<view class="product-item" v-for="(item, index) in productList" :key="index" @click="goDetail(item.proid)">
			<image :src="item.img1" mode="widthFix" class="product-image"></image>
			<view class="product-info">
				<view class="product-name">{{ item.proname }}</view>
				<view class="product-price">¥{{ item.originprice }}</view>
				<view class="product-desc">{{ item.desc }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bannerList: [],
			currentIndex: 0,
			productList: [],
			menuList: [],
			pageNum: 1,
			hasMore: true,
		}
	},
	// 下拉刷新事件
	onPullDownRefresh() {
    // 下拉刷新时执行的操作
    console.log('触发了下拉刷新');
    // 通常在这里进行数据刷新等操作
    this.pageNum = 1;
    this.hasMore = true;
    this.productList = [];
    this.getProduct();
    uni.stopPullDownRefresh();
  },
	// 上拉触底事件
	onReachBottom() {
    // 上拉触底时执行的操作
    console.log('触发了上拉触底');
    // 通常在这里进行数据加载等操作
    if (this.hasMore) {
      this.pageNum++;
      this.getProduct();
    }
   },
	onLoad() {
		this.getBanner()
		this.getProduct()
		this.getMenu()
	},
	
	methods: {
		getBanner() {
			uni.request({
				url: 'http://47.94.6.186:3001/api/banner/list',
				method: 'GET',
				success: (res) => {
					console.log(res.data)
					this.bannerList = res.data.data
				}
			})
		},
		onSwiperChange(e) {
			this.currentIndex = e.detail.current;
		},
		getProduct() {
			uni.request({
				url: 'http://47.94.6.186:3001/api/pro/list',
				method: 'GET',
				data: {
					count: this.pageNum,
					limitNum: 10
				},
				success: (res) => {
					console.log(res.data)
					this.productList = this.productList.concat(res.data.data)
					if (res.data.data.length < 10) {
						this.hasMore = false;
					}
				}
			})
		},
		getMenu(){
			uni.request({
				url: 'http://47.94.6.186:3001/api/menu/list',
				method: 'GET',
				success: (res) => {
					console.log(res.data)
					this.menuList = res.data.data
				}
			})
		},
		goDetail(proid){
			uni.navigateTo({
				url: '/pages/detail/detail?proid=' + proid
			})
		}
	}
}
</script>

<style>
.image-swiper {
  position: relative;
  width: 100%;
}

.swiper {
  width: 100%;
  height: 600rpx; /* 增加轮播图高度 */
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片自适应填充 */
}

.page-info {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  padding: 5rpx 15rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24rpx;
  border-radius: 20rpx;
}

/* 商品列表样式 */
.product-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  gap: 20rpx;
  box-sizing: border-box;
}

/* 商品卡片样式 */
.product-item {
  width: calc(50% - 10rpx); /* 一行两个，减去间距 */
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  box-sizing: border-box;
}

/* 商品图片样式 */
.product-image {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

/* 商品信息样式 */
.product-info {
  padding: 20rpx;
}

/* 商品名称样式 */
.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 商品价格样式 */
.product-price {
  font-size: 32rpx;
  color: #FF5722;
  margin-bottom: 10rpx;
}

/* 商品描述样式 - 超出省略 */
.product-desc {
  font-size: 24rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 响应式调整 */
@media (max-width: 350px) {
  .product-item {
    width: 100%; /* 小屏幕显示一个 */
  }
}

/* 菜单列表样式 */
.menu-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 菜单项样式 */
.menu-item {
  width: 20%; /* 一行五个 */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10rpx;
}

/* 菜单图标样式 */
.menu-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%; /* 圆形图标 */
  background-color: #fff;
  padding: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 10rpx;
}

/* 今日新品特殊样式 */
/* .menu-item:first-child .menu-image {
  background-color: #FF5722;
  padding: 20rpx;
} */

/* 菜单项文字样式 */
.menu-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10rpx;
}

/* 响应式调整 */
@media (max-width: 450px) {
  .menu-item {
    width: 25%; /* 小屏幕显示四个 */
  }
  
  @media (max-width: 350px) {
    .menu-item {
      width: 33.33%; /* 更小屏幕显示三个 */
    }
  }
}
</style>
